<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情</title>
    <link rel="stylesheet" href="./css/mediatyle.css"> 
    <link rel="stylesheet" href="./css/rest.css">
    <link rel="stylesheet" href="./css/index.css">
    <style>
        [v-cloak]{
            display: none;
        }
        img{
            width: 100%;
        }
        #app{
            min-height: 100vh;
        }
        .footer-box{
            position: absolute;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body class="___index___">
    <div id="app" v-cloak>
        <div class="top-nav">
            <img class="left-logo" v-if="!isShowInp" src="./images/logo.png" alt="">
            <div class="searchIup" v-else>
                <input type="text" v-model="searchVal" >
                <i class="close" @click="isShowInp = false"></i>
            </div>
            <div class="right-content">
                <img class="search-icon" @click="showInp()" src="./images/search.png" alt="">
                <img class="nav-icon" @click="iShowNav = !iShowNav" src="./images/navIcon.png" alt="">
            </div>
        </div>
        <div class="line"></div>  
        <div class="details-box" v-if="newsDetails">
            <div class="details-title">{{newsDetails.title}}</div>
            <div class="details-msg">
                <span>作者：{{newsDetails.author||'未知'}}</span>
                <span>发布时间：{{newsDetails.createTime}}</span>
            </div>
            <div class="details-content" v-html="newsDetails.content">      </div>
        </div>
        <div class="footer-box">
            <div class="footer-bottom">
                <p>© 2024 数字经济公共服务平台 版权所有</p>
                <p><a href="https://beian.miit.gov.cn/">赣ICP备2024036929号</a></p>
                <!-- <p>技术支持：xx科技有限公司</p> -->
            </div>
        </div>
        <div class="popBox" v-if="iShowNav">
            <div class="pop-center">
                <img src="./images/cancel.png" @click="iShowNav=false" class="cancel" alt="">
                <p class="nav-item" @click="goIndexPage()">首页</p>
                <p v-for="(item,index) of navList" class="nav-item" @click="goList(item)" :key="index">{{item.name}}</p>
            </div>
        </div>
    </div>
    <script src="./js/rem_count.js"></script>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="./js/axios.js"></script>
    <script src="./js/config.js"></script>
    <script>
        new Vue({
                el: '#app',
                data() {
                    return {
                        baseUrl,
                        navList:[],
                        isShowInp:false,
                        iShowNav:false,
                        newsId:null,
                        newsDetails:{},
                        searchVal:'',
                        loading:true
                    }
                },
                mounted(){
                    this.$nextTick(() => {
                        const urlParams = new URLSearchParams(window.location.search);
                        const newsId = urlParams.get('id');
                        this.getNavList()
                        this.getNewsDetails(Number(newsId))
                    })
                },
                methods:{
                    getNavList(){
                        axios.post(this.baseUrl+'index/getCategory', {})
                        .then( (res)=> {
                            console.log(res)
                            this.navList = res.data.data
                        })
                        .catch( (error)=> {
                            console.log(error);
                        });
                    },
                    showInp(){
                        if(this.isShowInp){
                            window.location.href = './search.html?title='+this.searchVal
                        }else{
                            this.isShowInp = true
                        }
                    },
                    getNewsDetails(id){
                        axios.post(this.baseUrl+'index/queryArticleById', {id})
                        .then( (res)=> {
                            this.newsDetails = res.data.data
                        })
                        .catch( (error)=> {
                            console.log(error);
                        });
                    },
                    goList(item){
                        window.location.href = './list.html?title='+item.name+'&id='+item.id
                    },
                    goIndexPage(){
                        window.location.href = './index.html'
                    }
                }
        })
    </script> 
</body>

</html>